<clr-alert *ngIf="errorFlag" [clrAlertType]="'danger'">
  <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<clr-alert *ngIf="successFlag" [clrAlertType]="'success'">
  <div class="alert-item">{{alertMessage}}</div>
</clr-alert>
<div>
	<h3 class="modal-title">Update My Password</h3>
	<form #passwordForm="ngForm" (ngSubmit)="updatePassword(passwordForm.value);" *ngIf="passwordFormData" ngNativeValidate>
        <section class="form-block">
            <div class="form-group">
                <label for="currentPassword">Current Password</label>
                <input type="password" name="currentPassword" [(ngModel)]="passwordFormData.currentPassword" required>
            </div>
            <div class="form-group">
                <label for="newPassword">New Password</label>
                <input type="password" name="newPassword" [(ngModel)]="passwordFormData.newPassword" required>
            </div>
            <div class="form-group">
                <label for="rNewpassword">Re Type Password</label>
                <input type="password" name="rNewpassword" [(ngModel)]="passwordFormData.rNewpassword" required>
            </div>
        </section>
        <button type="submit" [clrLoading]="submitBtnState" class="btn btn-primary">SUBMIT</button>
    </form>
</div>

<clr-modal [(clrModalOpen)]="loginModal">
    <div class="modal-body">
        <span>Password changed. Please login again!</span><br/>
        <button type="button" class="btn btn-outline" (click)="loginModal=false;loginAgain();">OK</button>
    </div>
</clr-modal>
